<template>
	<view class="home">
		<view class="title">注销账号</view>
		<view class="iptBlock" style="margin-bottom: 40rpx;">
			<image class="code-icon" src="../../static/images/phone.png" mode=""></image>
			<input type="text" v-model="fromLine.phone" class="ipt" placeholder="请输入手机号" placeholder-class="styles" />
		</view>
		<view class="iptBlock" style="margin-bottom: 100rpx;">
			<image class="code-icon" src="../../static/images/code.png" mode=""></image>
			<input type="text" class="ipt" maxlength="4" v-model="fromLine.sms_code" placeholder="请输入验证码"
				placeholder-class="styles" />
			<view class="code-txt" @click="sendCode" v-if="!btnDisabled">
				获取验证码
			</view>
			<view class="code-txt" v-if="btnDisabled" style="font-size: 30rpx;">
				{{ countdown + " " + "s" }}
			</view>
		</view>
		<view class="loginBtn" @click="handleLogin">注销</view>
    <uv-modal ref="modal" :content="errInfo.message" @cancel="cancel" align="center" :showCancelButton="true" @confirm="confirm"></uv-modal>
	</view>
</template>

<script>
	import reqApi from "../../api/api.js";
	export default {
		data() {
			return {
				fromLine: {
					phone: "",
					sms_code: ""
				},
				checked: false,
				btnDisabled: false,
				timer: null,
				countdown: 0,
        errInfo: {
          message: "",
          key: ""
        }
			}
		},
		onShow() {
			let userInfo = uni.getStorageSync("userInfo");
			this.fromLine.phone = userInfo.phone;
		},
		methods: {
			// 发送验证码
			sendCode() {
				if (!this.fromLine.phone) {
					uni.showToast({
						title: "请输入手机号",
						icon: 'none',
						mask: true,
						duration: 1500,
					})
					return
				}
				reqApi.sendMsg({
					phone: this.fromLine.phone,
					type: "logOut"
				}).then(res => {
					uni.showToast({
						title: "验证码发送成功",
						duration: 1500,
						icon: 'none',
						mask: true
					})
					this.countdown = 10;
					this.btnDisabled = true;
					if (this.timer) clearInterval(this.timer);
					this.timer = setInterval(() => {
						if (this.countdown > 0) {
							this.countdown -= 1;
						} else {
							clearInterval(this.timer);
							this.timer = null;
							this.btnDisabled = false;
						}
					}, 1000);
				})
			},
			// 注销
			handleLogin() {
				if (!this.fromLine.phone) {
					uni.showToast({
						title: "手机号不能为空",
						icon: 'none',
						mask: true,
						duration: 1500,
					})
					return
				}
				if (!this.fromLine.sms_code) {
					uni.showToast({
						title: "验证码不能为空",
						icon: 'none',
						mask: true,
						duration: 1500,
					})
					return
				}
				reqApi.userCancel(this.fromLine).then(res => {
					uni.clearStorage();
					uni.showToast({
						title: "注销成功",
						icon: 'none',
						mask: true,
						duration: 1500,
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/login/index"
						})
					}, 1500)
				}).catch(err=>{
          console.log("注销信息", err);
          if(err.status == 200){
            this.$refs.modal.open();
            this.errInfo.message = err.message;
            this.errInfo.key = err.data.result.key;
          }
        })
			},
      confirm() {
        let temp = {
          sms_code: this.fromLine.sms_code,
          key: this.errInfo.key
        }
      	reqApi.userCancel(temp).then(res=>{
          uni.showToast({
          	title: "注销成功",
          	icon: 'none',
          	mask: true,
          	duration: 1500,
          })
          setTimeout(() => {
          	uni.reLaunch({
          		url: "/pages/login/index"
          	})
          }, 1500)
        })
      },
      cancel(){
        this.$refs.modal.close();
      }
		}
	}
</script>

<style lang="scss" scoped>
	.wechat {
		width: 96rpx;
		height: 96rpx;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.home {
		padding: 0 40rpx;
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		background: #fff;
		padding-top: 140rpx;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #222222;
			margin-bottom: 100rpx;
		}

		.iptBlock {
			width: 100%;
			height: 104rpx;
			background: #F7F7F7;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;

			.code-icon {
				width: 48rpx;
				height: 48rpx;
			}

			.ipt {
				flex: 1;
				padding: 0 10rpx;
				box-sizing: border-box;
			}

			.code-txt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #EEA800;
			}
		}

		.loginBtn {
			width: 100%;
			height: 88rpx;
			background: #EEA800;
			border-radius: 200rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}

		.agreement {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
			justify-content: center;

			.round {
				width: 36rpx;
				height: 36rpx;
			}

			.xiey {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #222;
			}
		}
	}
</style>
